<template>
	<router-view />
	<Tabbar>
		<TabBarItem path='/home'>
			<template v-slot:img>
				<img src="./assets/img/shopping_home_tab_take_out.png" alt="">
			</template>
			<template v-slot:active-img>
				<img src="./assets/img/shopping_home_tab_take_out_selected.png" alt="">
			</template>
			<template v-slot:text>
				<span>首页</span>
			</template>
		</TabBarItem>
		<TabBarItem path="/found">
			<template v-slot:img>
				<img src="./assets/img/shopping_home_tab_found.png" alt="">
			</template>
			<template v-slot:active-img>
				<img src="./assets/img/shopping_home_tab_found_selected.png" alt="">
			</template>
			<template v-slot:text>
				<span>真香</span>
			</template>
		</TabBarItem>
		<TabBarItem path="/order">
			<template v-slot:img>
				<img src="./assets/img/shopping_home_tab_order.png" alt="">
			</template>
			<template v-slot:active-img>
				<img src="./assets/img/shopping_home_tab_order_selected.png" alt="">
			</template>
			<template v-slot:text>
				<span>订单</span>
			</template>
		</TabBarItem>
		<TabBarItem path="/profile">
			<template v-slot:img>
				<img src="./assets/img/shopping_home_tab_personal.png" alt="">
			</template>
			<template v-slot:active-img>
				<img src="./assets/img/shopping_home_tab_personal_selected.png" alt="">
			</template>
			<template v-slot:text>
				<span>我的</span>
			</template>
		</TabBarItem>
	</Tabbar>
</template>

<script>
	import Tabbar from "./components/tab-bar/Tabbar";
	import TabBarItem from './components/tab-bar/Tab-bar-item'
	export default {
		// name: "app",
		components: {
			Tabbar,
			TabBarItem
		},
		data() {
			return {

			}
		},
		mounted() {
			window.addEventListener('hashchange',()=>{
				let currentPath=window.location.hash.slice(1)
				console.log(currentPath)
				if (this.$router.push!==currentPath){
					this.$router.push(currentPath)
				}
			},false)
		}

	}
</script>

<style>
	
	body {
		margin: 0;
		background-color: #f5f5f5;
	}

	.tab-bar {
		position: fixed;
		bottom: 0;
		width: 100vw;
		height: 8vh;
		display: flex;
		justify-content: space-around;
		background: #f7f7f7;
		overflow: hidden;
		box-shadow: 0 -0.266667vw 0.533333vw rgb(0 0 0 /10%);

	}

	.tab-bar-item {
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		align-items: center;
		width: 49px;
		height: 100%;
		text-align: center;
		color: #8e8e93
	}

	.tab-bar-item>img {
		width: 100%;
		margin-top: -20px;
	}

	.actived {
		color: rgb(84, 186, 244)
	}
</style>
